<script>
import {HALF_SHELVES} from "@/utils/shipment";
import {deepCopy} from "@/utils";

export default {
  name: "ShipmentSteps",
  props: {
    history: {
      type: Array,
      required: true,
    },
    data: {
      type: Object,
      required: true,
    }
  },
  data(){
    let statusArr = [
      {status: 'wait_fl_receive', title: '待国内接收', description: '', adminAccount: ''},
      {status: 'wait_make_cabinet', title: '待装柜', description: '', adminAccount: ''},
      {status: 'wait_customs_declaration', title: '待报关', description: '', adminAccount: ''},
      {status: 'wait_shipment', title: '待装货', description: '', adminAccount: ''},
      {status: 'wait_customs_clearance', title: '待清关', description: '',  adminAccount: ''},
      {status: 'wait_receive', title: '待海外接收', description: '', adminAccount: ''},
      {status: 'wait_sorting', title: '待分拣', description: '', adminAccount: ''},
      {status: 'finished_sorting', title: '已分拣', description: '', adminAccount: ''},
      {status: 'finished_shelves', title: '已上架', description: '', adminAccount: ''},
    ];
    if(this.data.shipmentType === 'mkd_full' || this.data.shipmentType === 'mkd_cbt_full'){
      statusArr = [
        {status: 'wait_fl_receive', title: '待国内接收', description: '', adminAccount: ''},
        {status: 'wait_make_cabinet', title: '待装柜', description: '', adminAccount: ''},
        {status: 'wait_customs_declaration', title: '待报关', description: '', adminAccount: ''},
        {status: 'wait_shipment', title: '待装货', description: '', adminAccount: ''},
        {status: 'wait_customs_clearance', title: '待清关', description: '',  adminAccount: ''},
        {status: 'wait_receive', title: '待海外接收', description: '', adminAccount: ''},
        {status: 'wait_sorting', title: '待分拣', description: '', adminAccount: ''},
        {status: 'finished_sorting', title: '已分拣', description: '', adminAccount: ''},
        {status: 'official_delivered', title: '已送仓', description: '', adminAccount: ''},
      ];

      if(this.data.status2 === 'abolished'){
        const row = statusArr.find(item=> item.status === 'official_delivered')
        row.status = 'abolished';
        row.title = '已作废';
      }

    }
    if(this.data.shipmentType === 'offline_delivery'){
      statusArr = [
        {status: 'wait_fl_receive', title: '待国内接收', description: '', adminAccount: ''},
        {status: 'wait_make_cabinet', title: '待装柜', description: '', adminAccount: ''},
        {status: 'wait_customs_declaration', title: '待报关', description: '', adminAccount: ''},
        {status: 'wait_shipment', title: '待装货', description: '', adminAccount: ''},
        {status: 'wait_customs_clearance', title: '待清关', description: '',  adminAccount: ''},
        {status: 'wait_receive', title: '待海外接收', description: '', adminAccount: ''},
        {status: 'wait_sorting', title: '待分拣', description: '', adminAccount: ''},
        {status: 'finished_sorting', title: '已分拣', description: '', adminAccount: ''},
        {status: 'offline_delivered', title: '已交付', description: '', adminAccount: ''},
      ];
    }


    return {
      statusArr: statusArr
    }
  },
  computed: {
    active(){
      let index = 0
      if(this.data.status2 === HALF_SHELVES){
        this.pushHalfShelves()
      }

      index = this.statusArr.findIndex(item => item.status === this.data.status2)
      if(index === -1){
        index = 0
      }else{
        index++
      }

      return index
    },
    showStepList(){
      return this.statusArr.map(item=>{
        const obj = this.history.find(item2=> item2.status === item.status)
        if(obj){
          item.description = obj.statusTime
          if(obj.adminAccount){
            item.adminAccount = '操作员：' + obj.adminAccount
          }
        }
        return item
      })
    }
  },
  methods: {
    pushHalfShelves(){
      const status = HALF_SHELVES;
      const row = this.statusArr.find(item=> item.status === status)
      if(row){
        return;
      }
      const index = this.statusArr.findIndex(item=> item.status === 'finished_shelves')
      this.statusArr.splice(index,0, {status, title: '部分上架', description: '', adminAccount: ''})
    }
  }
}
</script>

<template>
  <div class="steps">
    <el-steps :active="active" >
      <el-step
        v-for="item in showStepList"
        :key="item.status"
        :title="item.title"
      >
        <template #title>
          <template v-if="item.adminAccount">
            <el-tooltip class="item" effect="dark" :content="item.adminAccount" placement="top-start">
              <div class="font-bold">
                {{item.title}}
              </div>
            </el-tooltip>
          </template>
          <template v-else>
            <div class="font-bold">
              {{item.title}}
            </div>
          </template>
        </template>
        <template #description>
          {{item.description}}
        </template>
      </el-step>

    </el-steps>
  </div>
</template>

<style scoped lang="scss">

</style>
